<%-- 
    Document   : ViewProfileDetails
    Created on : Sep 4, 2013, 2:38:21 PM
    Author     : ChauAnh
--%>

<%@page import="java.util.Iterator"%>
<%@page import="java.util.Set"%>
<%@page import="java.util.HashMap"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>View profile</title>
        <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
        <style type="text/css">
            .tabViewProfile{
                width: 190px;
                height: 30px;
                border-width: 1px;
            }

            /* tab bar */          
            * {margin: 0; padding: 0;}
            ul.TabBarHorizontal
            {                
                margin: 0;
                padding: 0;
                list-style-type: none;
                cursor: default;
                width: 200px;
                margin-bottom: 0px;                
            }          


            ul.TabBarHorizontal li
            { 
                z-index: auto;
                margin: 0;
                padding: 0;
                list-style-type: none;
                font-size: 100%;
                position: relative;
                text-align: left;
                cursor: default;

                background-color: #A80037;
                background-repeat: repeat;
            }

            ul.TabBarHorizontal a
            {
                padding-left: 10px;
                display: block;
                cursor: pointer;                
                color: #FFF;
                text-decoration: none;
                width: 200px;
                height: 50px;
                font-weight: bold;
                font-size: 1.2em;
                font-family: helvetica, arial, sans-serif;                
            }

            ul.TabBarHorizontal a:hover
            {                
                background-color: #FFB3BE;                
                color: #FFF;
            }           

            /*Popbox view profile*/
            .popBoxViewProfile{
                z-index: -100;                                
                position:absolute;                
                display: none;
                width: 520px;
                height: 600px;
                background-color: #f7f7f7;
                border: 1px solid #A80037;                   
                padding-left: 20px;
                padding-top: 20px;
                padding-right: 20px;
                font-family: helvetica, arial, sans-serif;
                font-size: small;    
            }

            #popBoxArrowPersonal{
                width: 0;
                height: 0;                
                border-right: 20px solid #A80037;
                border-top: 20px solid transparent;
                border-bottom: 20px solid transparent;
                position:absolute;
                left:-20px;
                top:210px;    
            }

            #popBoxArrowProfessional{
                width: 0;
                height: 0;                
                border-right: 20px solid #A80037;
                border-top: 20px solid transparent;
                border-bottom: 20px solid transparent;
                position:absolute;
                left:-20px;
                top:255px;
            }

            #popBoxArrowLikings{
                width: 0;
                height: 0;                
                border-right: 20px solid #A80037;
                border-top: 20px solid transparent;
                border-bottom: 20px solid transparent;
                position:absolute;
                left:-20px;
                top:310px;
            }

            .titleCandidateProfile{
                color: #A80037;
                font-family: helvetica, arial, sans-serif;
                font-size: medium;
                font-weight: bold;
                width: 250px;                
                border-bottom-style: dotted;
                border-bottom-width: 1px;
                padding-top: 5px;
            }

            .contentCandidateProfile{
                color: #A80037;                
                font-family: helvetica, arial, sans-serif;
                font-size: medium;
                font-style: italic;
                border-bottom-style: dotted;
                border-bottom-width: 1px;
                border-right-style: none;
                padding-top: 5px;
            }
        </style>

        <script type="text/javascript">
            $(function() {
                //Personal                
                var namePop = 'popBoxPersonal';
                $("#popBoxPersonal").show();
                $("#wrapperPersonal").click(function() {
                    if (namePop != 'popBoxPersonal') {
                        $("#" + namePop).hide();
                    }
                    $("#popBoxPersonal").show();
                    namePop = 'popBoxPersonal';
                });

                //Professional
                $("#popBoxProfessional").hide();
                $("#wrapperProfessional").click(function() {
                    if (namePop != 'popBoxProfessional') {
                        $("#" + namePop).hide();
                    }
                    $("#popBoxProfessional").show();
                    namePop = 'popBoxProfessional';
                });
                //Likings
                $("#popBoxLikings").hide();
                $("#wrapperLikings").click(function() {
                    if (namePop != 'popBoxLikings') {
                        $("#" + namePop).hide();
                    }
                    $("#popBoxLikings").show();
                    namePop = 'popBoxLikings';
                });
            });
        </script>

    </head>
    <body>
        <%
            if(request.getSession().getAttribute("login")==null){
                out.println("<script type='text/javascript'>alert('Please login!');window.location.href = 'index.jsp';</script>");
            }
            
            if (request.getSession().getAttribute("listCandidateProfileDetails") == null) {
                response.sendRedirect("index.jsp");
            } else {
                HashMap listRequest = (HashMap) request.getSession().getAttribute("listCandidateProfileDetails");
                Set keyRequest = listRequest.keySet();
                Iterator itr = keyRequest.iterator();
                while (itr.hasNext()) {
                    Object keyid = itr.next();
                    HashMap hm = (HashMap) listRequest.get(keyid);

        %>
        <div align="center">
            <div align="center" style="height: auto; width: 800px;">
                <jsp:include page="master.jsp" flush="true"/>                
            </div>            
            <div align="center" style="height: 100%; width: 800px">   
                <table style="width: 800px" border="0">
                    <tr>
                        <td rowspan="2" style="width: 200px" align="left">
                            <img src="avatar/<%=hm.get("avatar")%>" width='200' height='200' border='0' alt='User'/>
                            <input class="buttonProfile" type="button" id="wrapperPersonal" value="Personal"/>
                            <input class="buttonProfile" type="button" id="wrapperProfessional" value="Professional"/>
                            <input class="buttonProfile" type="button" id="wrapperLikings" value="Likings"/>
                            <a href='SendRequest?receiver=<%=hm.get("username")%>' style="text-decoration: none">
                                <img border="0" src="images/sendHeart.png" width="200" height="100" alt="sendHeart"/>
                            </a>
                        </td>
                        <td style="width: 20px;">

                        </td>
                        <td style="width: 600px; vertical-align: top">                    
                            <div>                            
                                <div class="popBoxViewProfile" id="popBoxPersonal">
                                    <div id="popBoxArrowPersonal">
                                    </div>
                                    <table style="width: 100%">
                                        <tr>
                                            <td align="left" class="titleCandidateProfile">
                                                First name:
                                            </td>
                                            <td align="left" class="contentCandidateProfile">
                                                <%=hm.get("first_name")%>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="left" class="titleCandidateProfile">
                                                Middle name:
                                            </td>
                                            <td align="left" class="contentCandidateProfile">
                                                <%=hm.get("middle_name")%>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="left" class="titleCandidateProfile">
                                                Last name:
                                            </td>
                                            <td align="left" class="contentCandidateProfile">
                                                <%=hm.get("last_name")%>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="left" class="titleCandidateProfile">
                                                Gender:
                                            </td>
                                            <td align="left" class="contentCandidateProfile">
                                                <%=hm.get("gender")%>
                                            </td>
                                        </tr><tr>
                                            <td align="left" class="titleCandidateProfile">
                                                Birth date:
                                            </td>
                                            <td align="left" class="contentCandidateProfile">
                                                <%=hm.get("birthdate")%>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="left" class="titleCandidateProfile">
                                                Marital status:
                                            </td>
                                            <td align="left" class="contentCandidateProfile">
                                                <%=hm.get("marital_status")%>
                                            </td>
                                        </tr><tr>
                                            <td align="left" class="titleCandidateProfile">
                                                Height
                                            </td>
                                            <td align="left" class="contentCandidateProfile">
                                                <%=hm.get("height")%> Cm
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="left" class="titleCandidateProfile">
                                                Country living in:
                                            </td>
                                            <td align="left" class="contentCandidateProfile">
                                                <%=hm.get("country_living_in")%>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="left" class="titleCandidateProfile">
                                                City:
                                            </td>
                                            <td align="left" class="contentCandidateProfile">
                                                <%=hm.get("city")%>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="left" class="titleCandidateProfile">
                                                Contact number:
                                            </td>
                                            <td align="left" class="contentCandidateProfile">
                                                <%=hm.get("contact_number")%>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="left" class="titleCandidateProfile">
                                                Mother tongue:
                                            </td>
                                            <td align="left" class="contentCandidateProfile">
                                                <%=hm.get("mother_tongue")%>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="left" class="titleCandidateProfile">
                                                Religion:
                                            </td>
                                            <td align="left" class="contentCandidateProfile">
                                                <%=hm.get("religion")%>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="left" class="titleCandidateProfile">
                                                Caste:
                                            </td>
                                            <td align="left" class="contentCandidateProfile">
                                                <%=hm.get("caste")%>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="left" class="titleCandidateProfile">
                                                Self features:
                                            </td>
                                            <td align="left" class="contentCandidateProfile">
                                                <%=hm.get("self_features")%>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="left" class="titleCandidateProfile">
                                                Family details:
                                            </td>
                                            <td align="left" class="contentCandidateProfile">
                                                <%=hm.get("family_details")%>
                                            </td>
                                        </tr>

                                    </table>
                                </div>

                                <div class="popBoxViewProfile" id="popBoxProfessional">
                                    <div id="popBoxArrowProfessional">
                                    </div>
                                    <table style="width: 100%">
                                        <tr>
                                            <td align="left" class="titleCandidateProfile">
                                                Qualification current status:
                                            </td>                                    
                                            <td align="left" class="contentCandidateProfile">
                                                <%=hm.get("qualification_current_status")%>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="left" class="titleCandidateProfile">
                                                Working at:
                                            </td>                                    
                                            <td align="left" class="contentCandidateProfile">
                                                <%=hm.get("working_at")%>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="left" class="titleCandidateProfile">
                                                Designation:
                                            </td>                                    
                                            <td align="left" class="contentCandidateProfile">
                                                <%=hm.get("designation")%>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="left" class="titleCandidateProfile">
                                                Location:
                                            </td>                                    
                                            <td align="left" class="contentCandidateProfile">
                                                <%=hm.get("location")%>
                                            </td>                                        
                                        </tr>
                                    </table>
                                </div>

                                <div class="popBoxViewProfile" id="popBoxLikings">
                                    <div id="popBoxArrowLikings">
                                    </div>
                                    <table style="width: 100%;">
                                        <tr>                                        
                                            <td align="left" class="titleCandidateProfile">
                                                Hobbies:
                                            </td>
                                            <td align="left" class="contentCandidateProfile">
                                                <%=hm.get("hobbies")%>
                                            </td>
                                        </tr>
                                        <tr>                                        
                                            <td align="left" class="titleCandidateProfile">
                                                Favorite music:
                                            </td>
                                            <td align="left" class="contentCandidateProfile">
                                                <%=hm.get("favorite_music")%>
                                            </td>
                                        </tr>
                                        <tr>                                        
                                            <td align="left"class="titleCandidateProfile">
                                                Movie:
                                            </td>
                                            <td align="left" class="contentCandidateProfile">
                                                <%=hm.get("movie")%>
                                            </td>
                                        </tr>
                                        <tr>                                        
                                            <td align="left" class="titleCandidateProfile">
                                                Cuisin es:
                                            </td>
                                            <td align="left" class="contentCandidateProfile">
                                                <%=hm.get("cuisin_es")%>
                                            </td>
                                        </tr>
                                        <tr>                                        
                                            <td align="left" class="titleCandidateProfile">
                                                Books:
                                            </td>
                                            <td align="left" class="contentCandidateProfile">
                                                <%=hm.get("books")%>
                                            </td>
                                        </tr>
                                        <tr>                                        
                                            <td align="left" class="titleCandidateProfile">
                                                Place:
                                            </td>
                                            <td align="left" class="contentCandidateProfile">
                                                <%=hm.get("place")%>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>                    
                        </td>                
                    </tr>
                </table>
            </div>
        </div>
        <%
                }
            }
        %>     


    </body>
</html>
